<template>
  <div class="xy-home-wrapper">
    <div style="width:70%;height: 750px;background: #ffffff;">
      <div class="nz-home-balance">
        <p
          style="background:linear-gradient(90deg,#fd7374,#febd93);margin: 0 0.5% 0 0;"
        >总余额：{{this.balance}}</p>
        <!-- <p style="margin: 0 0 0 0.5%;"></p> -->
        <p
          style="background:linear-gradient(90deg,#429ffd,#7dd9fd);margin: 0 0 0 0.5%;"
        >总积分：{{this.balance}}</p>
      </div>
      <img style="width:100%;height: 550px;margin:auto;" src="../assets/img/home.jpg" />
    </div>
    <div class="xy-info" style="height: auto">
      <el-row :gutter="20" style="height: 180px;">
        <el-col :span="6">
          <el-card style="background-color: #FE7781; padding: 25px;" shadow="hover">
            <h3 style="text-align: center;">关于会员的总数</h3>总是显示总是显示总是显示
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="background-color: #D287FD;padding: 25px;" shadow="hover">
            <h3 style="text-align: center;">关于会员的总数</h3>总是显示总是显示总是显示
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="background-color: #33CAF1;padding: 25px;" shadow="hover">
            <h3 style="text-align: center;">关于会员的总数</h3>总是显示总是显示总是显示
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="background-color: #16D987;padding: 25px;" shadow="hover">
            <h3 style="text-align: center;">关于会员的总数</h3>总是显示总是显示总是显示
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-card shadow="hover">
            <el-tabs :lazy="true" v-model="activeName" @tab-click="tabClick">
              <el-tab-pane label="圆形图" name="first">
                <div id="chart2" :style="{width: '400px', height: '300px'}"></div>
              </el-tab-pane>
              <el-tab-pane label="柱形结构" name="second">
                <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
              </el-tab-pane>
              <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
              <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="xy-search">
      <div class="block">
        <span class="demonstration">时间筛选器:</span>
        <el-date-picker
          v-model="value6"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <p>{{value6}}</p>
      <span class="demonstration">地址筛选器:</span>
      <el-select v-model="value7" placeholder="地址选择">
        <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
          <span style="float: left">{{ item.label }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
        </el-option>
      </el-select>
    </div>

    <div class="xy-about">
      <el-row>
        <el-col class="el-col" style="border-right:20px solid #F4F4F4 ;" :span="13">
          <img width="80%" src="../assets/img/code.jpg" class="image" /> 
          <!-- <div id="myChart" :style="{width: '300px', height: '300px'}"></div> -->
        </el-col>
        <el-col class="el-col" :span="11">
          <!-- <div id="chart2" :style="{width: '300px', height: '300px'}"></div> -->
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import API from "../api/api_jxc";
// 引入基本模板
var echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  name: "home",
  data() {
    return {
      balance: "5000",
      activeName: "second",
      value6: "",
      value7: "",
      cities: [
        {
          value: "Beijing",
          label: "北京"
        },
        {
          value: "Shanghai",
          label: "上海"
        },
        {
          value: "Nanjing",
          label: "南京"
        },
        {
          value: "Chengdu",
          label: "成都"
        },
        {
          value: "Shenzhen",
          label: "深圳"
        },
        {
          value: "Guangzhou",
          label: "广州"
        }
      ]
    };
  },
  mounted() {
    // this.storeId = this.$store.state.app.nzStore.storeId;
    this.$nextTick(() => {});
    this.drawLine();
    // this.getlist();
  },
  methods: {
    tabClick(tab) {
      console.log("点击的tab");
    },
    getlist() {
      let that = this;
      // API.API.homebalance(params).then(res => {
      //   if (res.data.code == 200) {
      //     that.balance = res.data.data.balance;
      //   } else {
      //     this.$notify.error({
      //       title: "错误",
      //       message: res.msg,
      //       offset: 150
      //     });
      //   }
      // });
      this.axios({
        url: "http://192.168.1.68:8020/nongzi/store/balance",
        methods: "get",
        params: {
          storeId: that.storeId
        }
      }).then(res => {
        if (res.data.code == 200) {
          that.balance = res.data.data.balance;
        } else {
          this.$notify.error({
            title: "错误",
            message: res.msg,
            offset: 150
          });
        }
      });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      let Chart2 = echarts.init(document.getElementById("chart2"));
      //柱状图
      myChart.setOption({
        title: {
          text: "今年羊毛衫销量",
          textStyle: {
            color: "red"
            // fontStyle: "italic"
          }
        },
        legend: {
          type: "scroll"
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {
          type: "value", //什么类型的轴
          name: "销量", //轴的标题
          nameGap: 10, //标题与y轴之间的距离
          min: 5, //最大值
          max: 100, //最小值
          splitNumber: 7 //分段数目
        },
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });

      //圆形图
      // 圆环图各环节的颜色
      var color = ["#0000FF", "#00ffff", "#00ff00", "#ffff00"];

      // 圆环图各环节的名称和值(系列中各数据项的名称和值)
      var data = [
        {
          name: "其它",
          value: 320
        },
        {
          name: "休闲裤",
          value: 586
        },
        {
          name: "女士衬衫",
          value: 874
        },
        {
          name: "运动服",
          value: 725
        }
      ];

      // 指定图表的配置项和数据
      var option = {
        //背景色
        backgroundColor: {
          // 背景颜色
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(0,0,0,0.4)" // 0% 处的颜色
            },
            {
              offset: 0.5,
              color: "rgba(0,0,0,0.4)" // 50% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(0,0,0,0.4)" // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        },

        // 标题
        title: [
          {
            text: "商城各服装销量对比",
            top: "5%",
            left: "3%",
            textStyle: {
              color: "#000",
              fontSize: 18
            }
          }
        ],

        // 图例(提示框上的值)
        legend: [
          {
            selectedMode: true, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
            top: "10%",
            left: "center",
            textStyle: {
              // 图例的公用文本样式。
              fontSize: 20,
              color: "#fff"
            },
            data: ["其它", "休闲裤", "女士衬衫", "运动服"]
          }
        ],

        // 提示框
        tooltip: {
          show: true, // 是否显示提示框
          formatter: "{b} </br> 销量{c}件 </br> 占比{d}%" // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
        },

        //貌似用不到
        // graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
        graphic: {
          type: "text", // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
          top: "center", // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
          left: "center", // 同上
          style: {
            text: "各服装销量对比", // 文本块文字。可以使用 \n 来换行。[ default: '' ]
            fill: "#fff", // 填充色。
            fontSize: 30, // 字体大小
            fontWeight: "bold" // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
          }
        },

        // 系列列表
        series: [
          {
            name: "圆环图系列名称", // 系列名称
            type: "pie", // 系列类型
            center: ["50%", "50%"], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
            radius: ["30%", "45%"], // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
            hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
            color: color, // 圆环图的颜色
            label: {
              // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
              normal: {
                show: true, // 是否显示标签[ default: false ]
                position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
                formatter: "{b} : {c}件" // 标签内容
              }
            },
            labelLine: {
              // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
              normal: {
                show: true, // 是否显示视觉引导线。
                length: 15, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                length2: 10, // 视觉引导项第二段的长度。
                lineStyle: {
                  // 视觉引导线的样式
                  //color: '#000',
                  //width: 1
                }
              }
            },
            data: data // 系列中的数据内容数组。
          }
        ]
      };
      Chart2.setOption(option);

      // 绘制图表
      // Chart2.setOption({
      // 	title: {
      // 		text: '某站点用户访问来源',
      // 		subtext: '纯属虚构',
      // 		x: 'center'
      // 	},
      // 	tooltip: {
      // 		trigger: 'item',
      // 		formatter: "{a} <br/>{b} : {c} ({d}%)"
      // 	},
      // 	legend: {
      // 		orient: 'vertical',
      // 		x: 'left',
      // 		data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      // 	},
      // 	toolbox: {
      // 		show: true,
      // 		feature: {
      // 			mark: {
      // 				show: true
      // 			},
      // 			dataView: {
      // 				show: true,
      // 				readOnly: false
      // 			},
      // 			magicType: {
      // 				show: true,
      // 				type: ['pie', 'funnel'],
      // 				option: {
      // 					funnel: {
      // 						x: '25%',
      // 						width: '50%',
      // 						funnelAlign: 'left',
      // 						max: 1548
      // 					}
      // 				}
      // 			},
      // 			restore: {
      // 				show: true
      // 			},
      // 			saveAsImage: {
      // 				show: true
      // 			}
      // 		}
      // 	},
      // 	calculable: true,
      // 	series: [{
      // 		name: '访问来源',
      // 		type: 'pie',
      // 		radius: '55%',
      // 		center: ['50%', '60%'],
      // 		data: [{
      // 				value: 335,
      // 				name: '直接访问'
      // 			},
      // 			{
      // 				value: 310,
      // 				name: '邮件营销'
      // 			},
      // 			{
      // 				value: 234,
      // 				name: '联盟广告'
      // 			},
      // 			{
      // 				value: 135,
      // 				name: '视频广告'
      // 			},
      // 			{
      // 				value: 1548,
      // 				name: '搜索引擎'
      // 			}
      // 		]
      // 	}]
      // });
    }
  }
};
</script>

<style>
#chart2 {
  /* margin-left: 50px; */
  text-align: center;
}
.xy-home-wrapper {
  width: 100%;
  height: 750px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  /* background-image: url(../assets/img/home.jpg); */
  /* background-repeat: no-repeat; */
  /* background-size: 1200px 600px; */
  /* -moz-background-size: 1200px 600px; */
}
.nz-home-balance {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nz-home-balance p {
  width: 49.1%;
  height: 180px;
  line-height: 180px;
  font-size: 60px;
  text-align: center;
  border-radius: 5px;
  color: #ffffff;
}
#myChart {
  /* margin-left: 80px; */
  text-align: center;
}

.xy-search {
  padding: 25px;
}

.demonstration {
  padding: 5px;
  font-size: 16px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}
.xy-info .el-col {
  position: relative;
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-card__body {
  padding: 5px;
}

.xy-info {
  margin-top: 5px;
  padding: 10px;
  height: 308px;
  background-color: white;
}

.xy-about {
  padding: 20px 0 0 0;
  color: #545c64;
}
.xy-about .el-col {
  background-color: white;
}
.el-col-xy-scan {
}

.el-col-xy-text {
  border-left: 5px solid #545c64;
  border-right: 5px solid #545c64;
}

.xy-cir {
  text-align: center;
  height: 170px;
  border-radius: 50%;
  background-color: #c6c7c7;
}

.xy-cir p {
  line-height: 150px;
  font-size: 25px;
}
</style>
